<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		require.config({
			paths : {
				echarts : 'http://echarts.baidu.com/build/dist'
			}
		});
		// 使用
		require(
		  [
		    'echarts',
		    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
		  ],
		  function (ec) {
		    // 基于准备好的dom，初始化echarts图表
		    var myChart = ec.init(document.getElementById('main')); 
		    //设置数据
		    var option = {
		    	title : {
		    		show : true,	/*是否显示标题*/
		    		link : 'http://www.baidu.com',	/*超链接*/
		    		target : 'blank',	/*blank在新窗口打开  self当前窗口打开*/
		    		text : '销量图',		/*主标题文本*/
		    		textStyle : {
		    			color : '#aaa',
		    			fontStyle : 'normal',	/*字体风格 normal italic oblique*/
		    			fontWeight : 'normal',	/*字体粗细 normal bold bolder lighter*/
		    			fontFamily : 'sans-serif',	/*字体系列*/
		    			fontSize : 28
		    		},
		    		textAlign : 'center', /*水平对齐方式 left center right*/
		    		textBaseLine : 'middle',	/*垂直对齐方式 top middle bottom*/
// 		    		subText : '',	/*子标题文本*/
// 		    		sublink : 'http://www.ifeng.com',
// 		    		subtarget : 'blank',
// 		    		subtextStyle : {
// 		    			color : '#aaa',
// 		    			fontStyle : 'normal',	/*字体风格 normal italic oblique*/
// 		    			fontWeight : 'normal',	/*字体粗细 normal bold bolder lighter*/
// 		    			fontFamily : 'sans-serif',	/*字体系列*/
// 		    			fontSize : 12
// 		    		},
		    		//padding : 5,	/*标题内边距*/
		    		//itemGap : 10,	/*主副标题间距离*/
		    		//zlevel : 0,	/*所有图形的 zlevel 值。*/
		    		/*
		    		zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。
		    		我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。
		    		需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
		    		zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。*/
		    		//z : 2, 
		    		/*组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。*/
		    		/*z相比zlevel优先级更低，而且不会创建新的 Canvas。*/
		    		//left : 'auto',	/*grid 组件离容器左侧的距离。*/
		    		//top : 'auto',	/*grid 组件离容器上侧的距离。*/
		    		//right : 'auto', /*grid 组件离容器右侧的距离。*/
		    		//bottom : 'auto',/*grid 组件离容器下侧的距离。*/
		    		backgroundColor : 'transparent', /*标题背景色，默认透明。*/
		    		borderColor : '#ccc',
		    		borderWidth : 0,
		    		shadowBlur : 10, 
		    		/*
		    		图形阴影的模糊大小。
		    		该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
		    		*/
		    		shadowColor : '#aaa',	/*阴影颜色*/
		    		shadowOffsetX : 0,	/*阴影水平方向上的偏移距离。*/
		    		shadowOffsetY : 0	/*阴影垂直方向上的偏移距离。*/
		    	},
		    	//设置坐标轴
		    	xAxis : [{
		    		type : 'category',
		    	    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
		    	}],
		    	yAxis : [{
		    	  	type : 'value'
		    	}],
		    	//设置数据
		    	series : [{
		    	  	"name":"销量",
		    	    "type":"bar",
		    	   	"data":[5, 20, 40, 10, 24, 20,24,32],
		    	}]
		    };

		    // 为echarts对象加载数据 
		    myChart.setOption(option); 
		  }
		);
	</script>
</body>
</html>